<template>
	<div class='container'>
		<h3>不适用teleport的情况</h3>
		<p>position: fixed 能够相对于浏览器窗口放置有一个条件，那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性</p>
		<div class="box">
			<MyModal />
			<div class="text">这个元素的z-index比弹窗高</div>
		</div>

		<br />
		<hr />
		<br />
		<h3>适用teleport</h3>
		<div class="box box1">
			<MyModal teleport />
			<div class="text">这个元素的z-index比弹窗高</div>
		</div>
	</div>
</template>

<script setup>
import MyModal from './MyModal.vue'
</script>
<style lang='less' scoped>
.container {
	.box {
		position: relative;
		z-index: 1000;
		transform: translateX(200px);

		.text {
			width: fit-content;
			position: relative;
			left: 50%;
			z-index: 2000;
			background: brown;
			color: #fff;
			padding: 4px;
			border-radius: 2px;
		}
	}
	.box1{
		.text{
			left: 0;
		}
	}
}
</style>
